<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<link href="../../component/layui/css/layui.css" rel="stylesheet" />
	<link href="../../admin/css/pearCommon.css" rel="stylesheet" />
	<link href="../../admin/css/pear-tree/dtree.css" rel="stylesheet" />
	<link href="../../admin/css/pear-tree/font/dtreefont.css" rel="stylesheet" />
	<style>
		#organizationTree{
			width: 100% !important;
			height: -webkit-calc(100vh - 130px);
            height: -moz-calc(100vh - 130px);
            height: calc(100vh - 130px);
		}
	</style>
</head>
<body class="pear-container">
	<div class="layui-card">
		<div class="layui-card-body">
			<form class="layui-form" action="">
				<div class="layui-form-item">
					<label class="layui-form-label">用户名</label>
					<div class="layui-input-inline">
						<input type="text" name="realName" placeholder="" class="layui-input">
					</div>
					<label class="layui-form-label">账号</label>
					<div class="layui-input-inline">
						<input type="text" name="organizationname" placeholder="" class="layui-input">
					</div>
					<label class="layui-form-label">地点</label>
					<div class="layui-input-inline">
						<select name="city" lay-verify="required">
							<option value=""></option>
							<option value="0">北京</option>
							<option value="1">上海</option>
							<option value="2">广州</option>
							<option value="3">深圳</option>
							<option value="4">杭州</option>
						</select>
					</div>
					<button class="pear-btn pear-btn-md pear-btn-primary" lay-submit lay-filter="organization-query">
						<i class="layui-icon layui-icon-search"></i>
						查询
					</button>
					<button type="reset" class="pear-btn pear-btn-md">
						<i class="layui-icon layui-icon-refresh"></i>
						重置
					</button>
				</div>
			</form>
		</div>
	</div>
	<div class="layui-row layui-col-space15">
		<div class="layui-col-md3">
			<div class="layui-card">
				<div class="layui-card-body">
					<div id="organizationTreeContent" style="overflow: auto">
						<ul id="organizationTree" class="dtree" data-id="9527"></ul>
					</div>
				</div>
			</div>
		</div>
		<div class="layui-col-md9">
			<div class="layui-card">
				<div class="layui-card-body">
					<table id="organization-table" lay-filter="organization-table"></table>
				</div>
			</div>
		</div>
	</div>

	<script type="text/html" id="organization-toolbar">
		<button class="pear-btn pear-btn-primary pear-btn-md" lay-event="add">
			<i class="layui-icon layui-icon-add-1"></i>
			新增
		</button>
		<button class="pear-btn pear-btn-danger pear-btn-md" lay-event="batchRemove">
			<i class="layui-icon layui-icon-delete"></i>
			删除
		</button>
	</script>

	<script type="text/html" id="organization-bar">
		<button class="pear-btn pear-btn-primary pear-btn-sm" lay-event="edit"><i
				class="layui-icon layui-icon-edit"></i></button>
		<button class="pear-btn pear-btn-danger pear-btn-sm" lay-event="remove"><i
				class="layui-icon layui-icon-delete"></i></button>
	</script>

	<script src="../../component/layui/layui.js"></script>
	<script>
		layui.use(['table', 'form', 'jquery', 'dtree'], function () {
			let table = layui.table;
			let form = layui.form;
			let $ = layui.jquery;
			let dtree = layui.dtree;

			let MODULE_PATH = "operate/";

			let cols = [
				[{
						type: 'checkbox'
					},
					{
						title: '名称',
						field: 'name',
						align: 'center'
					},
					{
						title: '人数',
						field: 'userCount',
						align: 'center'
					},
					{
						title: '位置',
						field: 'location',
						align: 'center'
					},
					{
						title: '操作',
						toolbar: '#organization-bar',
						align: 'center',
						width: 130
					}
				]
			]

			var DTree = dtree.render({
				elem: "#organizationTree",
				//data: data,
				initLevel: "2", //默认展开层级为1
				line: true, // 有线树
				ficon: ["1", "-1"], // 设定一级图标样式。0表示方形加减图标，8表示小圆点图标
				icon: ["0", "2"], // 设定二级图标样式。0表示文件夹图标，5表示叶子图标
				method: 'get',
				url: "../../admin/data/organizationtree.json"
			});

			table.render({
				elem: '#organization-table',
				url: '../../admin/data/organization.json',
				height: 'full-150',
				page: true,
				cols: cols,
				skin: 'line',
				toolbar: '#organization-toolbar',
				defaultToolbar: [{
					layEvent: 'refresh',
					icon: 'layui-icon-refresh',
				}, 'filter', 'print', 'exports']
			});

			// 绑定节点点击事件
			dtree.on("node(organizationTree)", function (obj) {
				if (!obj.param.leaf) {
					var $div = obj.dom;
					DTree.clickSpread($div); //调用内置函数展开节点
				} else {
					layer.msg("叶子节点就不展开了,刷新右侧列表");
					table.reload("organization-table");
				}
			});

			table.on('tool(organization-table)', function (obj) {
				if (obj.event === 'remove') {
					window.remove(obj);
				} else if (obj.event === 'edit') {
					window.edit(obj);
				}
			});

			table.on('toolbar(organization-table)', function (obj) {
				if (obj.event === 'add') {
					window.add();
				} else if (obj.event === 'refresh') {
					window.refresh();
				} else if (obj.event === 'batchRemove') {
					window.batchRemove(obj);
				}
			});

			form.on('submit(organization-query)', function (data) {
				table.reload('organization-table', {
					where: data.field
				})
				return false;
			});

			window.add = function () {
				layer.open({
					type: 2,
					title: '新增',
					shade: 0.1,
					area: ['500px', '400px'],
					content: MODULE_PATH + 'add.html'
				});
			}

			window.edit = function (obj) {
				layer.open({
					type: 2,
					title: '修改',
					shade: 0.1,
					area: ['500px', '400px'],
					content: MODULE_PATH + 'edit.html'
				});
			}

			window.remove = function (obj) {
				layer.confirm('确定要删除该用户', {
					icon: 3,
					title: '提示'
				}, function (index) {
					layer.close(index);
					let loading = layer.load();
					$.ajax({
						url: MODULE_PATH + "remove/" + obj.data['organizationId'],
						dataType: 'json',
						type: 'delete',
						success: function (result) {
							layer.close(loading);
							if (result.success) {
								layer.msg(result.msg, {
									icon: 1,
									time: 1000
								}, function () {
									obj.del();
								});
							} else {
								layer.msg(result.msg, {
									icon: 2,
									time: 1000
								});
							}
						}
					})
				});
			}

			window.batchRemove = function (obj) {
				let data = table.checkStatus(obj.config.id).data;
				if (data.length === 0) {
					layer.msg("未选中数据", {
						icon: 3,
						time: 1000
					});
					return false;
				}
				let ids = "";
				for (let i = 0; i < data.length; i++) {
					ids += data[i].organizationId + ",";
				}
				ids = ids.substr(0, ids.length - 1);
				layer.confirm('确定要删除这些用户', {
					icon: 3,
					title: '提示'
				}, function (index) {
					layer.close(index);
					let loading = layer.load();
					$.ajax({
						url: MODULE_PATH + "batchRemove/" + ids,
						dataType: 'json',
						type: 'delete',
						success: function (result) {
							layer.close(loading);
							if (result.success) {
								layer.msg(result.msg, {
									icon: 1,
									time: 1000
								}, function () {
									table.reload('organization-table');
								});
							} else {
								layer.msg(result.msg, {
									icon: 2,
									time: 1000
								});
							}
						}
					})
				});
			}

			window.refresh = function (param) {
				table.reload('organization-table');
			}
		})
	</script>
</body>
</html>